<template>
    <view class="detailBox">
        <view class="mart-30">
            <view class="commit-title">基本信息</view>
            <view class="topContent readBox" v-if="thisData">
                <u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true">
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳编码</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.code }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳名称</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.name }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">规格型号</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.guiGe }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">直径</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.diameter }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">公称捻距</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.nianJu }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安全运行时长</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ computedDay(thisData.installDate) }}天</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.installLengthNum }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">绳子条数</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.cnt || "-" }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升用途</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.hoisterUsage_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.wireropeType_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升机类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.hoister_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装日期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.installDate | ymd }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">主要负责人</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.linkUser || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">负责人电话</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.linkPhone || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">矿山</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.department_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">备注</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.remark || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">供应商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.supplier_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">制造商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.producer_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">抗拉强度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.mpa_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">表面状态</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.surfaceStatus_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">捻制类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.twistingType_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                </u-read-more>
            </view>
        </view>
        <view class="chartBox">
            <u-tabs :activeStyle="{ color: '#409EFF' }" :current="current" :list="tabList" @click="tabClick"></u-tabs>
            <view class="chart" v-show="current == 0">
                <qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData.LA" :canvas2d="true" />
            </view>
            <view class="chart" v-show="current == 1">
                <qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData.DIA" :canvas2d="true" />
            </view>
            <view class="chart" v-show="current == 2">
                <qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData.LMA" :canvas2d="true" />
            </view>
            <view class="chart" v-show="current == 3">
                <qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData.NianJu" :canvas2d="true" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            thisData: {},
            tabList: [
                {
                    name: "LA",
                },
                {
                    name: "DIA",
                },
                {
                    name: "LMA",
                },
                {
                    name: "LL",
                },
            ],
            current: 0,

            opts: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 10, 0, 15],
                dataLabel: false,
                // enableScroll: true,
                legend: {
                    itemGap: 50,
                    lineHeight: 30,
                },
                xAxis: {
                    disableGrid: true,
                    // scrollShow: true,
                    // itemCount: 5,
                    rotateLabel: true,
                    rotateAngle: 45,
                    marginTop: 5,
                    fontSize: 10,
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    unit: "%",
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                        activeType: "hollow",
                    },
                },
            },
            chartData: {
                LA: {},
                DIA: {},
                LMA: {},
                NianJu: {},
            },
        };
    },
    onLoad(options) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("stateDetail", function (data) {
            that.init(data.data);
        });
    },
    methods: {
        computedDay(startDate) {
            let dayNum = this.$gx.DateDiff("date", startDate, this.$gx.GetDateTime());
            return dayNum;
        },
        init(data) {
            this.$app.CallApi(this.$app.api.UsingWirerope.GetStatusMonitoryHistoryByID(data.autoID), {
                success: (res) => {
                    this.thisData = res;
                    this.echartsData = res.checkWireropeHistoryList;
                    this.initEcharts(0);
                },
            });
        },
        tabClick(item) {
            let index = item.index;
            this.current = index;
            this.initEcharts(index);
        },
        initEcharts(index) {
            let echartsData = this.echartsData;

            let item = echartsData[index];
            console.log(item);
            const that = this;

            let xAxisArr = item.x_Date.map((x) => {
                // return this.$gx.FormatDate("YY-MM-DD",x);
                return this.$gx.YMD(x);
            });

            let seriesArr = item.items.map((x) => {
                return {
                    name: x.name,
                    data: x.num,
                };
            });

            let res = {
                categories: xAxisArr,
                series: seriesArr,
            };
            setTimeout(() => {
                let objName = item.tabName == "捻距变化" ? "NianJu" : item.tabName;
                this.chartData[objName] = JSON.parse(JSON.stringify(res));
            }, 500);
        },
    },
};
</script>

<style scoped>
.chartBox {
    width: 100%;

    .chart {
        width: 690rpx;
        height: 800rpx;
    }
}

.chartCavans {
    width: 100%;
    margin-top: 30rpx;
    height: 600rpx;
}
</style>
